
<head>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>

<script>
    $(function () {
        var Cubic_chart = new Highcharts.Chart({
            chart: {
                renderTo: 'Cubic',
                type: 'line',
            },
            title: {
                text: 'Cubic',
                x: -20 //center
            },
            xAxis: {
                title: {
                    text: '# of records'
                }
            },
            yAxis: {
                title: {
                    text: 'Response time (seconds)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{"name": "DREST 2.1.5", "data": [[3, 0.0040409999999999995], [14, 0.0045705], [39, 0.0050475], [84, 0.005978], [155, 0.007379500000000001], [258, 0.009155], [399, 0.011596], [584, 0.014615], [819, 0.0196445], [1110, 0.023429], [1463, 0.030967], [1884, 0.0363245], [2379, 0.042646], [2954, 0.052871], [3615, 0.061801499999999995], [4368, 0.075429]]}, {"name": "DRF 3.13.1", "data": [[3, 0.0016865], [14, 0.0031869999999999997], [39, 0.0054065], [84, 0.008954], [155, 0.012576], [258, 0.017916500000000002], [399, 0.023919], [584, 0.0305975], [819, 0.040176], [1110, 0.049114], [1463, 0.0607875], [1884, 0.073817], [2379, 0.08280850000000001], [2954, 0.100053], [3615, 0.116385], [4368, 0.1316425]]}]
        });
    });
</script>
<div id="Cubic" style="width:100%"></div>
<br/>

<script>
    $(function () {
        var Linear_chart = new Highcharts.Chart({
            chart: {
                renderTo: 'Linear',
                type: 'line',
            },
            title: {
                text: 'Linear',
                x: -20 //center
            },
            xAxis: {
                title: {
                    text: '# of records'
                }
            },
            yAxis: {
                title: {
                    text: 'Response time (seconds)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{"name": "DREST 2.1.5", "data": [[256, 0.0049345], [512, 0.0079795], [768, 0.011013499999999999], [1024, 0.014020999999999999], [1280, 0.017308999999999998], [1536, 0.021166], [1792, 0.024343999999999998], [2048, 0.02784], [2304, 0.0314175], [2560, 0.033699], [2816, 0.038019], [3072, 0.041934], [3328, 0.043043], [3584, 0.0794575], [3840, 0.0490405], [4096, 0.053863999999999995]]}, {"name": "DRF 3.13.1", "data": [[256, 0.08685699999999999], [512, 0.178358], [768, 0.24748900000000001], [1024, 0.3386085], [1280, 0.4147925], [1536, 0.514057], [1792, 0.5993599999999999], [2048, 0.6840200000000001], [2304, 0.773505], [2560, 0.842225], [2816, 0.920455], [3072, 1.0180465], [3328, 1.080375], [3584, 1.171262], [3840, 1.276456], [4096, 1.3620234999999998]]}]
        });
    });
</script>
<div id="Linear" style="width:100%"></div>
<br/>

<script>
    $(function () {
        var Quadratic_chart = new Highcharts.Chart({
            chart: {
                renderTo: 'Quadratic',
                type: 'line',
            },
            title: {
                text: 'Quadratic',
                x: -20 //center
            },
            xAxis: {
                title: {
                    text: '# of records'
                }
            },
            yAxis: {
                title: {
                    text: 'Response time (seconds)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{"name": "DREST 2.1.5", "data": [[20, 0.003293], [72, 0.0041295], [156, 0.0052875], [272, 0.006942500000000001], [420, 0.0093875], [600, 0.0121055], [812, 0.0145185], [1056, 0.01793], [1332, 0.022449499999999997], [1640, 0.025948], [1980, 0.031333], [2352, 0.0370555], [2756, 0.04199], [3192, 0.0666925], [3660, 0.0555085], [4160, 0.060936500000000005]]}, {"name": "DRF 3.13.1", "data": [[20, 0.0023765], [72, 0.0044495], [156, 0.006364], [272, 0.008661499999999999], [420, 0.0117725], [600, 0.0146015], [812, 0.017887], [1056, 0.0214405], [1332, 0.026827], [1640, 0.029961], [1980, 0.036192], [2352, 0.040636], [2756, 0.045358499999999996], [3192, 0.050945000000000004], [3660, 0.056278499999999995], [4160, 0.0628445]]}]
        });
    });
</script>
<div id="Quadratic" style="width:100%"></div>
<br/>
